<template>
	<div class="container">
		<!-- 面包屑导航 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>小区管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 搜索小区表单 -->
		<el-row style="margin-top: 10px;">
			<el-form :inline="true" :model="queryInfo">
				<el-form-item label="小区名称:">
					<el-input clearable @clear="queryCommunityList" v-model="queryInfo.communityName"
						placeholder="请输入想要查找的小区名称"></el-input>
				</el-form-item>
				<el-form-item label="创建时间:">
					<el-date-picker v-model="date" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="queryCommunityList">搜索</el-button>
				</el-form-item>
			</el-form>
		</el-row>
		<!-- 新增小区 -->
		<el-row style="margin-top: 10px;margin-bottom: 10px;">
			<el-button type="primary" size="medium" @click="addCommunity">新增小区</el-button>
		</el-row>
		<!-- 表格展示数据 -->
		<el-table :data="communityList" :cell-style="{ 'text-align': 'center' }"
			:header-cell-style="{fontSize: '14px', backgroundColor: '#a0fa92',color:'#0c1bf2','text-align': 'center' }"
			border style="width: 100%;">
			<el-table-column prop="communityId" label="ID">
			</el-table-column>
			<el-table-column prop="communityName" label="名称">
			</el-table-column>
			<el-table-column prop="communityAddress" label="位置">
			</el-table-column>
			<el-table-column prop="communityUserCount" label="用户数量">
			</el-table-column>
			<el-table-column prop="communityShopCount" label="关联门店">
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-link :underline="false" type="primary"
						@click="getStores(scope.row.communityId)">查看关联门店</el-link>
					<el-link :underline="false" type="primary" @click="editCommunity(scope.row)">编辑小区</el-link>
					&nbsp;&nbsp;
					<el-link :underline="false" type="primary"
						@click="romovecommunity(scope.row.communityId)">删除</el-link>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-row class="block" style="margin-top:10px ;">
			<!-- current-change选择页码时触发的事件，size-change页面展示条数发生变化时，触发的事件-->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-row>
		<!-- 新增小区修改小区的对话框组件-->
		<!-- title 对话框的名称 :visible.sync:true对话框会显示 false 对话框隐藏 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" @close='cancel'>
			<el-form :model="community">
				<el-form-item label="小区名称:" label-width="80px">
					<el-input v-model="community.communityName" placeholder="请输入小区名称"></el-input>
				</el-form-item>
				<el-form-item label="所属地区:" label-width="80px">
					<!-- 级联选择器 -->
					<el-cascader v-model="address" placeholder="请选择" :options="citys"></el-cascader>
				</el-form-item>
				<el-form-item label="" label-width="80px">
					<el-input v-model="community.communityAddress" placeholder="请输入详细地址"></el-input>
				</el-form-item>
				<el-form-item label="小区坐标:" label-width="80px">
					<el-button @click="getGeo">获取位置</el-button>
					<span
						v-show="community.communityLatitude">{{community.communityLatitude}},{{community.communityLongitude}}</span>
				</el-form-item>
			</el-form>
			<div slot="footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="updateCommunity">保 存</el-button>
			</div>
		</el-dialog>
		<!-- 查看关联门店 -->
		<el-dialog title="查看关联门店" :visible.sync="dialogTableVisible">
			<el-row>
				<el-form :inline="true" :model="shopsQueryInfo">
					<el-form-item>
						<el-input clearable @clear="getStores(shopsQueryInfo.communityId)"
							v-model="shopsQueryInfo.shopName" style="width: 260px;"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button @click="getStores(shopsQueryInfo.communityId)">搜索</el-button>
					</el-form-item>
					<el-form-item>
						<el-button @click="addShops">添加关联门店</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-table :data="storesList" border :cell-style="{'text-align':'center'}"
				:header-cell-style="{'text-align':'center',backgroundColor:'#6febb4',color:'#ca2bff'}">
				<el-table-column type="index" label="序号" width="80"></el-table-column>
				<el-table-column prop="shopName" label="名称"></el-table-column>
				<el-table-column prop="shopId" label="ID"></el-table-column>
				<el-table-column prop="shopAddress" label="地址"></el-table-column>
				<el-table-column prop="shopOrderCount" label="订单数量"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-link type="primary" :underline="false" @click="StoresRemove(scope.row.shopId)">删除</el-link>
					</template>
				</el-table-column>
			</el-table>
			<div slot="footer">
				<el-button @click="dialogTableVisible = false">取 消</el-button>
			</div>
			<!-- 分页 -->
			<el-row class="block" style="margin-top:10px ;">
				<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
					:current-page="shopsQueryInfo.pageNum" :page-sizes="[1, 5, 10, 15]"
					:page-size="shopsQueryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
					:total="storesTotal">
				</el-pagination>
			</el-row>
		</el-dialog>
		<!-- 添加关联门店 -->
		<el-dialog title="添加关联门店" :visible.sync="dialogShopVisible" fullscreen>
			<el-row>
				<el-form :inline="true" :model="shopsQueryInfo">
					<el-form-item>
						<el-input clearable @clear="addShops()" v-model="shopsQueryInfo.shopName"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button @click="addShops()">搜索</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-table :data="shopList" border @selection-change="handleSelectionChange"
				:cell-style="{'text-align':'center'}"
				:header-cell-style="{'text-align':'center',backgroundColor:'#6febb4',color:'#ca2bff'}">
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column prop="shopName" label="名称"></el-table-column>
				<el-table-column prop="shopId" label="ID"></el-table-column>
				<el-table-column prop="shopAddress" label="地址"></el-table-column>
				<el-table-column prop="shopOrderCount" label="订单数量"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-link type="primary" :underline="false" @click="shopsRemove(scope.row.shopId)">删除</el-link>
					</template>
				</el-table-column>
			</el-table>
			<div slot="footer">
				<el-button @click="dialogShopVisible = false">取 消</el-button>
				<el-button @click="addAssociatedStores">保存</el-button>
			</div>
			<!-- 分页 -->
			<el-row class="block" style="margin-top:10px ;">
				<el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
					:current-page="shopsQueryInfo.pageNum" :page-sizes="[1, 5, 10, 15]"
					:page-size="shopsQueryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
					:total="shopTotal">
				</el-pagination>
			</el-row>
		</el-dialog>
	</div>
</template>

<script>
	import citys from '../assets/citydata.js' //导入省市区数据
	export default {
		data() {
			return {
				//添加关联门店
				dialogShopVisible: false,
				shopList: [],
				shopTotal: 1,
				//查看关联门店
				shopsQueryInfo: {
					pageNum: 1,
					pageSize: 5,
					shopName: '',
					communityId: ''
				},
				communityId: '',
				storesList: [],
				storesTotal: 1,
				dialogTableVisible: false,
				queryInfo: { //创建查询对象数据
					communityName: '',
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 6
				},
				total: 1,
				date: '',
				//创建接受数据对象
				communityList: [],
				title: '新增小区',
				//创建小区地址对象
				community: {
					addOrUpdateFlag: 1, //是否新增还是修改
					communityAddress: '', //详细地址
					communityAreaCode: "", //区域码
					communityCity: "", //城市
					communityCoordinates: "", // 全地址
					communityDistrict: "", //区域
					communityId: "", //编号
					communityLatitude: "", //经度
					communityLongitude: "", //纬度
					communityName: "", //小区名称
					communityProvince: "" //省份
				},
				citys: citys,
				dialogFormVisible: false,
				address: [],
				shopArrays: [],
			}
		},
		methods: {
			//用来接收添加门店数据
			handleSelectionChange(val) {
				this.shopArrays = val
			},
			//保存
			addAssociatedStores() {
				let shopIds = [];
				for (let it of this.shopArrays) {
					shopIds.push(it.shopId)
				}
				this.$http.post('associatedStores/addAssociatedStores', {
						fendeShopCommunityList: shopIds,
						panghuCommunityId: this.communityId
					})
					.then(res => {
						if (res.data.status == 200) {
							this.$message.success('添加成功！')
							this.dialogShopVisible = false;
							this.queryCommunityList();
						} else {
							this.$message.error('添加失败！')
						}
					})
			},
			//删除
			shopsRemove(id) {

			},
			//添加门店分页
			handleSizeChange2(val) {
				this.shopsQueryInfo.pageSize = val;
				this.shopsQueryInfo.pageNum = 1;
				this.addShops();
			},
			handleCurrentChange2(val) {
				this.shopsQueryInfo.pageNum = val;
				this.addShops();
			},
			//添加关联门店
			addShops() {
				this.shopsQueryInfo.communityId = this.communityId;
				this.$http.get('associatedStores/findShopListByAdd', {
						params: this.shopsQueryInfo
					})
					.then(res => {
						if (res.data.status == 200) {
							this.shopList = res.data.data.list;
							this.shopTotal = res.data.data.total;
							this.dialogTableVisible = false;
							this.dialogShopVisible = true;
						}
					})
			},
			//关联门店分页
			handleSizeChange1(val) {
				this.shopsQueryInfo.pageSize = val;
				this.shopsQueryInfo.pageNum = 1;
				this.getStores(this.communityId);
			},
			handleCurrentChange1(val) {
				this.shopsQueryInfo.pageNum = val;
				this.getStores(this.communityId);
			},
			//查看关联门店
			getStores(id) {
				this.communityId = id;
				this.shopsQueryInfo.communityId = id;
				this.$http.get('associatedStores/associatedStoresList', {
						params: this.shopsQueryInfo
					})
					.then(res => {
						this.storesList = res.data.data.list;
						this.storesTotal = res.data.data.total;
						this.dialogTableVisible = true;
					})
			},
			//删除关联门店
			StoresRemove(id) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.post('associatedStores/associatedStoresRemove', {
							panghuCommunityId: this.communityId,
							panghuShopId: id
						})
						.then(res => {
							if (res.data.status == 200) {
								this.$message.success('删除成功！')
								this.getStores(this.communityId)
								this.queryCommunityList()
							} else {
								this.$message.error('删除失败！')
							}
						})
				})

			},
			//删除数据
			romovecommunity(id) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.post('community/communityRemove', {
							communityId: id
						})
						.then(res => {
							if (res.data.status == 200) {
								this.$message({
									type: 'success',
									message: '删除成功!'
								});
								//删除完成后再查一遍
								this.queryCommunityList();
							} else {
								this.$message({
									type: 'info',
									message: '已取消删除！'
								});
							}
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//去修改的页面
			editCommunity(row) {
				this.dialogFormVisible = true;
				this.title = '编辑小区';
				this.community = row;
				this.address = [row.communityProvince, row.communityCity, row.communityDistrict]
				this.community.addOrUpdateFlag = 2;
			},
			//取消
			cancel() {
				this.dialogFormVisible = false;
				this.community = {
					addOrUpdateFlag: 1, //是否新增还是修改
					communityAddress: '', //详细地址
					communityAreaCode: "", //区域码
					communityCity: "", //城市
					communityCoordinates: "", // 全地址
					communityDistrict: "", //区域
					communityId: "", //编号
					communityLatitude: "", //经度
					communityLongitude: "", //纬度
					communityName: "", //小区名称
					communityProvince: "" //省份
				};
				this.address = [];
			},
			//添加修改小区
			updateCommunity() {
				this.$http.post('community/communityUpdate', this.community)
					.then(res => {
						// console.log(res.data)
						if (res.data.status == 200) {
							this.queryCommunityList()
							this.dialogFormVisible = false
							this.$message.success('操作成功！')
							this.cancel()
						} else {
							this.$message.error('操作失败！')
						}
					})
			},
			//获取经纬度
			getGeo() {
				if (!this.address[0]) {
					this.$message.warning('请输入省份')
					return false;
				}
				// let add = this.address[0] + this.address[1] + this.address[2] + this.community.communityAddress
				let add = this.community.communityProvince + this.community.communityCity + this.community
					.communityDistrict + this.community.communityAddress
				this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
						params: {
							key: '457886b5972a97e93fb9cdccebfd450f',
							address: add
						}
					})
					.then(res => {
						// console.log(this.community)
						let loc = res.data.geocodes[0].location
						this.community.communityLongitude = loc.split(',')[0] //维度
						this.community.communityLatitude = loc.split(',')[1] //经度
					})
					.catch(err => {
						this.$message.error('接口异常！')
					})
			},
			// 新增小区方法
			addCommunity() {
				this.dialogFormVisible = true;
				this.title = '新增小区';
				this.addOrUpdateFlag = 1;
			},
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.queryInfo.pageSize = val;
				this.queryInfo.pageNum = 1;
				this.queryCommunityList();
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.queryInfo.pageNum = val;
				this.queryCommunityList();
			},
			//定义方法调用接口，获取数据
			queryCommunityList() {
				// console.log(this.date[0])
				this.$http.get('community/communityList', {
						params: this.queryInfo //params（路由参数）用于在不同路由之间传递动态数据。
					})
					.then(res => {
						if (res.data.status == 200) {
							//将查询到
							this.communityList = res.data.data.list
							this.total = res.data.data.total
						} else {
							this.$message.error('接口数据异常！')
						}
					})
					.catch(err => {
						this.$message.error('服务器接口异常！')
					})
			}
		},
		mounted() { //钩子函数，页面加载时直接执行的方法
			this.queryCommunityList()
		},
		watch: {
			//要求名称必须和变量名保持一致
			date() {
				if (this.date) {
					this.queryInfo.startTime = this.date[0]
					this.queryInfo.endTime = this.date[1]
				} else {
					this.queryInfo.startTime = ''
					this.queryInfo.endTime = ''
				}
			},
			address() {
				this.community.communityProvince = this.address[0]
				this.community.communityCity = this.address[1]
				this.community.communityDistrict = this.address[2]
			}
		}
	}
</script>

<style scoped>
	.el-link {
		font-size: 12px;
		/* margin-left: 5px; */
	}
</style>